<template>
  <div>
      <p>{{light}}</p>

      <input type="text" v-model="firstname">
      <input type="text" v-model="lastname">

      <p>  全名：{{fullname}}</p>

      <input type="text" v-model="user.username">
  </div>
</template>
<script>
export default {
  data() {
    return {
      light: '红灯',
      firstname: '张',
      lastname: '三',
      fullname: '',
      user: {
        username: 'jack'
      }
    }
  },
  // 监听器和computed对比： 计算属性的性能更好，能用计算属性实现就用计算属性实现；计算属性无法处理异步的情况，如果异步，只能通过watch实现

  // 监听器可以监听data中数据的变化
  watch: {
    // 监听的数据名作为函数名，这个函数有两个参数，分别代表新值和就值
    light(newval, oldval) {
      console.log(newval, oldval);
    },
    // 监听姓
    firstname(newval) {
      setTimeout(() => {
        this.fullname = newval + this.lastname
      }, 1000)
    },
    // 监听名
    lastname: {
      handler: function(newval) {
        console.log('监听器执行了');
        this.fullname = this.firstname = newval
      },
      // immediate: true 表示立即执行一次监听逻辑
      immediate: true
    },
    // 对于对象，需要使用深度监听
    user: {
      // handler不能乱写
      handler: function(newval) {
        console.log(newval);
      },
      // deep:true表示开启深度监听
      deep: true
    }
  },
}
</script>
<style>
  
</style>